<template>
	<view>
		<view class="head flex">
			<view class="bold size-36 ml-60" :style="{'color':data.statue == 3 ? '#fff1f1' : '#FC7032'}">{{data.status == 1 ? '已预约' : data.status == 2 ? '就诊中' : '就诊已完成'}}</view>
			<image :src="data.status == 3 ? '/static/order1.png' : '/static/order-icon.png'" mode=""></image>
		</view>
		<!-- <view class="head1 head flex">
			<view class="bold size-36 ml-60" style="color: #FC7032;">已完成</view>
			<image src="/static/order1.png" mode=""></image>
		</view> -->
		<view class="content">
			<view class="box flex_l">
				<image :src="data.patient_avatar" mode=""></image>
				<view class="ml-20">
					<view class="center">
						<view class="mr-20 ml-15 size-28">{{data.patient_name}}</view>
						<view class="tag">{{data.patient_gender == 0 ? '女' : '男'}} {{data.patient_age}}岁</view>
					</view>
					<view class="size-24 mt-10">手机号：{{data.patient_mobile}}</view>
				</view>
			</view>
			<view class="box size-24" style="line-height: 45rpx;">
				<view class="flex">
					<view class="size-28">问诊科室：</view>
					<view class="size-28" style="color: #999;">心脑血管科</view>
				</view>
				<view class="flex mt-20">
					<view class="size-28">问诊医生：</view>
					<view class="size-28" style="color: #999;">{{data.doctor_name}}</view>
				</view>
				<view class="flex mt-20">
					<view class="size-28">问诊方式：</view>
					<view class="size-28" style="color: #999;">面诊</view>
				</view>
				<view class="flex mt-20">
					<view class="size-28">问诊时间：</view>
					<view class="size-28" style="color: #999;">{{data.appoint_time}}</view>
				</view>
				<view class="flex mt-20">
					<view class="size-28">挂号费用：</view>
					<view class="size-28" style="color: #999;">￥{{data.appoint_price}}（已支付）</view>
				</view>
				<view class="flex mt-20">
					<view class="size-28">药物费用：</view>
					<view class="size-28" style="color: #999;">￥{{data.medicine_price}}（已支付）</view>
				</view>
			</view>
			<view class="flex mt-25">
				<view class="bold size-28 ml-30">病历卡信息</view>
				<view class="flex">
					<view v-for="i in data.case_list" class="a btn" style="width: 150rpx;">{{i.description}}</view>
					<!-- <view class="a btn ml-20" style="width: 150rpx;">补充病例</view> -->
				</view>
			</view>
			<view class="box">
				<view class="size-28">2023年3月2日 18：00记录</view>
				<view class="size-28 mt-20">患者自述：</view>
				<!-- <view class="size-24 mt-20" style="color: #666;">
					擅长:头痛、失眠、高血压、高血脂、便秘头痛、失眠、高血压、高血脂、便秘...擅长:头痛、失眠、高血压、高血脂、便秘头痛、失眠、高血...
				</view> -->
				<view class="size-24 mt-20" style="color: #666;">
					{{data.case_status}}
				</view>
				<view class="bottom" @click="navto">
					查看病历详情
				</view>
			</view>
		</view>
		<!-- <u-popup :show="show" mode="bottom" round="20" @close="show = false" closeOnClickOverlay>
			<view class="mt-20 ml-30 size-28 bold">
				日期
			</view>
			<view class="flex_l flex-wrap" >
				<view class="li active">今天（周五）</view>
				<view class="li">明天（周六）</view>
				<view class="li">后天（周日）</view>
				<view class="li">3-13（周一）</view>
				<view class="li">3-14（周二）</view>
				<view class="li">3-15（周三）</view>
			</view>
			<view class="mt-20 ml-30 size-28 bold">
				时段
			</view>
			<view class="item flex">
				<view class="flex">
					<image src="../../../static/time.png" mode=""></image>
					<view>
						<view class="size-28">新诊顾客</view>
						<view class="size-24 mt-10" style="color: #999;">请改约其他时间</view>
					</view>
				</view>
				<view style="width: 2rpx;height: 100rpx;background-color: #E3E3E3;"></view>
				<view class="flex">
					<image src="../../../static/new.png" mode=""></image>
					<view>
						<view class="size-28">复诊顾客</view>
						<view class="size-24 mt-10" style="color: #999;">请咨询医师能否加号</view>
					</view>
				</view>
			</view>
			<view class="flex_l flex-wrap" >
				<view class="li active1">10:00-10:30</view>
				<view class="li active1">10:00-10:30</view>
				<view class="li">10:00-10:30</view>
				<view class="li">10:00-10:30</view>
				<view class="li active">10:00-10:30</view>
				<view class="li">10:00-10:30</view>
				<view class="li">10:00-10:30</view>
			</view>
			<view class="box pt-30 pb-30 size-24">
				<text class="size-24 bold">说明：</text>
				就诊前3小时未提交病历信息表，自动取消就诊预约，并可发起退款，计入爽约次数，医生可以拒绝问诊请挂号成功后在挂号详情页尽快提交您的病历信息
			</view>
			<view class="btns center">
				<view class="btn bck">取消</view>
				<view class="btn">确定</view>
			</view>
		</u-popup> 
		<u-popup :show="show1" mode="center" :safeAreaInsetBottom="false" round="20" @close="show1 = false" closeOnClickOverlay>
			<view style="text-align: center;width: 610rpx;">
				<image src="" class="code-img" mode=""></image>
				<view class="footer">
					确定
				</view>
			</view>
		</u-popup> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:false,
				show1:false,
				id:'',
				data:{}
			}
		},
		onLoad(op) {
			this.id = op.id
			this.detail()
		},
		methods: {
			detail() {
				this.$api.orderDetail({
					order_id:this.id
				}).then(res => {
					this.data = res.data
				})
			},
			navto() {
				uni.navigateTo({
					url: '../../../index/patientInfo/info/info?id=' + this.id + '&department_id=' + this.data.department_id
				})
			}
		}
	}
</script>

<style lang="scss">
page{
	background-color: #f8f8f8;
}
.active{
	background: #882027 !important;
	color: #fff !important;
}
.footer{
	padding: 36rpx 0;
	text-align: center;
	color: #26A1FF;
	font-size: 28rpx;
	border-top: 2rpx solid #f1f1f1;
}
.code-img{
	width: 450rpx;
	height: 450rpx;
	background-color: pink;
	margin: 64rpx 0 34rpx 0;
}
.btns{
	margin-top: 40rpx;
	view{
		width: 300rpx;
		height: 80rpx;
	}
	.bck{
		background: #999999 !important;
		margin-right: 30rpx;
	}
}
.active1{
	background: #E3E3E3 !important;
	color: #999999 !important;
}
.item{
	width: 690rpx;
	height: 140rpx;
	background: #FFFFFF;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	border: 2rpx solid #882027;
	margin: 20rpx auto 0;
	padding: 0 30rpx;
	image{
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}
}
.li{
	width: 210rpx;
	height: 60rpx;
	background: rgba(136, 32, 39, .09);
	border-radius: 110rpx 110rpx 110rpx 110rpx;
	font-size: 24rpx;
	color: #882027;
	text-align: center;
	line-height: 60rpx;
	margin-left: 30rpx;
	margin-top: 20rpx;
}
.code{
	margin-top: 30rpx;
	padding-bottom: 100rpx;
	image{
		width: 220rpx;
		height: 220rpx;
		background-color: #fff;
		padding:  30rpx;
		border-radius: 20rpx;
	}
	.a{
		width: 250rpx;
		height: 80rpx;
		line-height: 80rpx;
		margin: 58rpx auto 0;
	}
}
.head{
	width: 100%;
	height: 212rpx;
	background: linear-gradient(180deg, #FFFFFF 0%, #FFEFE8 100%);
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	image{
		width: 116rpx;
		height: 116rpx;
		margin-right: 96rpx;
	}
}
.head1{
	background: linear-gradient(180deg, #FFFFFF 0%, #FFE1E3 100%) !important;
}
.bottom{
	padding: 20rpx 0 0 0;
	border-top: 2rpx solid #F1F1F1;
	color: #882027;
	font-size: 28rpx;
	text-align: center;
	margin-top: 30rpx;
}
.a{
	width: 210rpx;
	height: 50rpx;
	line-height: 50rpx;
	border: 2rpx solid #882027;
	background: #f8f8f8 !important;
	color: #882027 !important;
	margin-right: 20rpx;
}
.tag{
	width: 120rpx;
	height: 40rpx;
	background: #f6eded;
	border-radius: 10rpx 10rpx 10rpx 10rpx;
	text-align: center;
	line-height: 40rpx;
	font-size: 24rpx;
	color: #882027;
}
.box{
	width: 690rpx;
	background: #FFFFFF;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	margin: 30rpx auto 0;
	padding: 30rpx;
	image{
		width: 90rpx;
		height: 90rpx;
		border-radius: 50%;
		background-color: pink;
	}
}
.content{
	min-height: 600rpx;
	background: #F8F8F8;
	border-radius: 40rpx 40rpx 0rpx 0rpx;
	margin-top: -40rpx;
	overflow: hidden;
}
</style>
